{% load static %}
{% load menu_list %}
{% load notifications_tags %}
{% notifications_unread as unread_count %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="{% static 'img/logo.jpeg' %}">
    <title>快乐星球</title>
    <!-- Slick Slider -->
    <link rel="stylesheet" type="text/css" href="{% static 'plugin/vendor/slick/slick.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'plugin/vendor/slick/slick-theme.min.css' %}"/>
    <!-- Feather Icon-->
    <link href="{% static 'plugin/vendor/icons/feather.css' %}" rel="stylesheet" type="text/css">
    <!-- Bootstrap Icon-->
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-icons/font/bootstrap-icons.css' %}">
    <!-- Bootstrap core CSS -->
    <link href="{% static 'plugin/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet">


    {% block css %}{% endblock %}
    <style>

        .navbar-fixed-top {
            position: fixed;
            right: 0;
            left: 0;
            z-index: 1030
        }

        body {
            background-color: #212529;
        }

        .back-to-top {
            position: fixed;
            bottom: 3em;
            right: 3em;
            text-decoration: none;
            color: #EEEEEE;
            background-color: rgb(77, 58, 145);
            font-size: 12px;
            padding: 1em;
            display: none;
            border-radius: 4px;
            border: 0px;
        }

        .back-to-top:hover {
            background-color: rgba(67, 67, 67, 0.3);
        }

    </style>

</head>

<body>
<!-- Navigation -->
<nav class="navbar navbar-expand navbar-dark bg-dark osahan-nav-top p-0 navbar-fixed-top">
    <div class="container" style="height: 46px !important;">
        <form class="d-none d-sm-inline-block form-inline mr-auto my-2 my-md-0 mw-100 navbar-search">
            <div class="input-group">
                <input type="text" class="form-control shadow-none border-0" placeholder="Search people, jobs & more..."
                       aria-label="Search" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn" type="button">
                        <i class="feather-search"></i>
                    </button>
                </div>
            </div>
        </form>
        <ul class="navbar-nav ml-auto d-flex align-items-center">
            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
            <li class="nav-item dropdown no-arrow d-sm-none">
                <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    <i class="feather-search mr-2"></i>
                </a>
                <!-- Dropdown - Messages -->
                <div class="dropdown-menu dropdown-menu-right p-3 shadow-sm animated--grow-in"
                     aria-labelledby="searchDropdown">
                    <form class="form-inline mr-auto w-100 navbar-search">
                        <div class="input-group">
                            <input type="text" class="form-control border-0 shadow-none"
                                   placeholder="Search people, jobs and more..." aria-label="Search"
                                   aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn" type="button">
                                    <i class="feather-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>

            {% menu_list request %}

            <!-- 其他页面
                <li class="nav-item dropdown mr-2">
                    <a class="nav-link dropdown-toggle pr-0" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <i class="feather-file-text mr-2"></i><span class="d-none d-lg-inline">Pages</span>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right shadow-sm">
                        <a class="dropdown-item" href="jobs.html"><i class="feather-briefcase mr-1"></i> Jobs</a>
                        <a class="dropdown-item" href="profile.html"><i class="feather-user mr-1"></i> Profile</a>
                        <a class="dropdown-item" href="connection.html"><i class="feather-users mr-1"></i> Connection</a>
                        <a class="dropdown-item" href="company-profile.html"><i class="feather-user-plus mr-1"></i> Company
                            Profile</a>
                        <a class="dropdown-item" href="job-profile.html"><i class="feather-globe mr-1"></i> Job Profile</a>
                        <a class="dropdown-item" href="sign-in.html"><i class="feather-log-in mr-1"></i> Sign In</a>
                        <a class="dropdown-item" href="sign-up.html"><i class="feather-lock mr-1"></i> Sign Up</a>
                    </div>
                </li>
            -->

            <!-- 即可沟通信息,Counter - Alerts
            <li class="nav-item dropdown no-arrow mx-1 osahan-list-dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="feather-message-square"></i>

                    <span class="badge badge-danger badge-counter">8</span>
                </a>

                <div class="dropdown-list dropdown-menu dropdown-menu-right shadow-sm">
                    <h6 class="dropdown-header">
                        Message Center
                    </h6>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="dropdown-list-image mr-3">
                            <img class="rounded-circle" src="{% static 'img/p1.png' %}" alt="">
                            <div class="status-indicator bg-success"></div>
                        </div>
                        <div class="font-weight-bold overflow-hidden">
                            <div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've
                                been having.
                            </div>
                            <div class="small text-gray-500">Emily Fowler · 58m</div>
                        </div>
                    </a>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="dropdown-list-image mr-3">
                            <img class="rounded-circle" src="{% static 'mood/img/p2.png' %}" alt="">
                            <div class="status-indicator"></div>
                        </div>
                        <div class="overflow-hidden">
                            <div class="text-truncate">I have the photos that you ordered last month, how would you like
                                them sent to you?
                            </div>
                            <div class="small text-gray-500">Jae Chun · 1d</div>
                        </div>
                    </a>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="dropdown-list-image mr-3">
                            <img class="rounded-circle" src="{% static 'mood/img/p3.png' %}" alt="">
                            <div class="status-indicator bg-warning"></div>
                        </div>
                        <div class="overflow-hidden">
                            <div class="text-truncate">Last month's report looks great, I am very happy with the
                                progress so far, keep up the good work!
                            </div>
                            <div class="small text-gray-500">Morgan Alvarez · 2d</div>
                        </div>
                    </a>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="dropdown-list-image mr-3">
                            <img class="rounded-circle" src="{% static 'mood/img/p4.png' %}" alt="">
                            <div class="status-indicator bg-success"></div>
                        </div>
                        <div class="overflow-hidden">
                            <div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that
                                people say this to all dogs, even if they aren't good...
                            </div>
                            <div class="small text-gray-500">Chicken the Dog · 2w</div>
                        </div>
                    </a>
                    <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
                </div>
            </li>
         -->

            <!-- 消息通知 -->
            <li class="nav-item dropdown no-arrow mx-1 osahan-list-dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="feather-bell"></i>
                    <!-- Counter - Alerts -->
                    {% if request.universe.user.notifications.unread.count %}
                        <span class="badge badge-info badge-counter">{{ request.universe.user.notifications.unread.count }}</span>
                    {% endif %}
                </a>
                <!-- Dropdown - Alerts -->
                <div class="dropdown-list dropdown-menu dropdown-menu-right shadow-sm">
                    <h6 class="dropdown-header">
                        我的消息
                        {% if request.universe.user.notifications.unread %}
                            <a href="{% url 'read_all' %}">(全部标记已读)</a>
                        {% endif %}
                    </h6>

                    {% for notification in request.universe.user.notifications.unread %}
                        {#                        <a class="dropdown-item d-flex align-items-center" href="#">#}
                        {#                            <div class="mr-3">#}
                        {#                                <div class="icon-circle bg-primary">#}
                        {#                                    <i class="feather-download-cloud text-white"></i>#}
                        {#                                </div>#}
                        {#                            </div>#}
                        {#                            <div>#}
                        {#                                <div class="small text-gray-500">{{ notification.timesince }}之前</div>#}
                        {#                                <span class="font-weight-bold">{{ notification.verb }}</span>#}
                        {#                            </div>#}
                        {#                        </a>#}


                        <a class="dropdown-item d-flex align-items-center"
                           href="{% url 'read_my_notification' notification.pk %}">
                            <div class="dropdown-list-image mr-3">
                                <img class="rounded-circle" src="{% static 'img/p1.png' %}" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold overflow-hidden">
                                <div class="text-truncate">{{ notification.verb }}
                                </div>
                                <div class="small text-gray-500">{{ notification.timesince }}之前</div>
                            </div>
                        </a>

                    {% empty %}
                        <span class="font-weight-bold text-center">暂无新消息</span>
                    {% endfor %}
                    s

                    {#                        <a class="dropdown-item d-flex align-items-center" href="#">#}
                    {#                            <div class="mr-3">#}
                    {#                                <div class="icon-circle bg-primary">#}
                    {#                                    <i class="feather-download-cloud text-white"></i>#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                            <div>#}
                    {#                                <div class="small text-gray-500">December 12, 2019</div>#}
                    {#                                <span class="font-weight-bold">A new monthly report is ready to download!</span>#}
                    {#                            </div>#}
                    {#                        </a>#}


                    {#                    <a class="dropdown-item d-flex align-items-center" href="#">#}
                    {#                        <div class="mr-3">#}
                    {#                            <div class="icon-circle bg-success">#}
                    {#                                <i class="feather-edit text-white"></i>#}
                    {#                            </div>#}
                    {#                        </div>#}
                    {#                        <div>#}
                    {#                            <div class="small text-gray-500">December 7, 2019</div>#}
                    {#                            $290.29 has been deposited into your account!#}
                    {#                        </div>#}
                    {#                    </a>#}


                    <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
                </div>
            </li>

            <!-- Nav Item - User Information -->
            <li class="nav-item dropdown no-arrow ml-1 osahan-profile-dropdown">
                {% if request.universe.user %}
                    <a class="nav-link dropdown-toggle pr-0" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <img class="img-profile rounded-circle" src="{{ request.universe.user.avatar.url }}">
                    </a>

                    <!-- Dropdown - User Information -->

                    <div class="dropdown-menu dropdown-menu-right shadow-sm" style="min-width: 150px">
                        <div class="p-3 d-flex align-items-center">
                            <div class="dropdown-list-image mr-3">
                                <img class="rounded-circle" src="{{ request.universe.user.avatar.url }}" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold">
                                <div class="text-truncate">{{ request.universe.user.username }}</div>
                                <div class="small text-gray-500">{{ request.universe.user.motto }}</div>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href='{% url 'profile' request.universe.user.id %}'><i
                                class="feather-user mr-1"></i>个人资料</a>
                        <a class="dropdown-item" href='{% url 'mood_image_list' %}'><i
                                class="bi bi-heart-fill mr-1"></i>our life</a>
                        <a class="dropdown-item" href="{% url 'logout' %}"><i class="feather-log-out mr-1"></i>退 出</a>
                    </div>
                {% else %}
                    <a class="nav-link dropdown-toggle pr-0" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <img class="img-profile rounded-circle" src="{% static 'img/logo.jpeg' %}">
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow-sm">
                        <div class="p-3 d-flex align-items-center">
                            <div class="dropdown-list-image mr-3">
                                <img class="rounded-circle" src="{% static 'img/logo.jpeg' %}" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold">
                                <div class="text-truncate">快来加入我们的小宇宙吧</div>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'login' %}"><i class="feather-log-out mr-1"></i>登 录</a>
                    </div>
                {% endif %}
            </li>
        </ul>
    </div>
</nav>

<!-- 返回顶端 -->
<a href="#" class="back-to-top"><i class="bi bi-arrow-up-circle-fill"
                                   style="font-size: 1.5rem;"></i></a>

{% block content %}


{% endblock %}

<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'plugin/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- slick Slider JS-->
<!-- Custom scripts for all pages
-->
<script>
    // 页面框架加载完成之后自动执行函数
    $(function () {
        backToTop();    // 返回顶部
    });

    function backToTop() {
        $(document).ready(function () {
            // 滚动窗口来判断按钮显示或隐藏
            $(window).scroll(function () {
                if ($(this).scrollTop() > 150) {
                    $('.back-to-top').fadeIn(100);
                } else {
                    $('.back-to-top').fadeOut(100);
                }
            });

            // jQuery实现动画滚动
            $('.back-to-top').click(function (event) {
                event.preventDefault();
                $('html, body').animate({scrollTop: 0}, 500);
            })
        });
    }
</script>

{% block js %}{% endblock %}

</body>
</html>
